<script lang="ts">
export default {
  name: "videoxl",
};
</script>
<template>
  <div class="page-box h100 display-flex czbj videowe-page">
    <n-input-group>
      <n-input :style="{ width: '20%' }" v-model:value="inputVal" />
      <n-button type="primary" @click="serinout"> 搜索 </n-button>
    </n-input-group>

    <div class="videowe-box">
      <template  v-for="(item, idx) in dataList"
          :key="idx">
        <div
          class="video-box sz"
       
          @click="
            hfs('videoDetails', {
              htmls: item.htmls,
              downUrl: item.downUrl,
            })
          "
        >
          <img class="img-box" :src="item.fm" />
          <p class="fz16 nowrap dsfdtt">
            {{ item.title }}
          </p>
        </div>
      </template>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { dxget, hf } from "../../util/index";
import { h, ref, reactive } from "vue";
let dataList = ref();
let inputVal = ref();
let jbnxe = ref(10)
const getVideo = async () => {
  let { data }: any = await dxget("pacong/xldy", {
    text: inputVal.value,
  });
  dataList.value = data;
};
const hfs = (url, data) => {
  hf(url, data);
};
const serinout = () => {
  dataList.value = [];
  getVideo();
};

getVideo();
</script>

 <style scoped>
.img-box {
  width: 100%;
  height: 257px;
  border-radius: 4px;
  overflow: hidden;
  background: #f8f8f8;
}
.video-box {
}

.videowe-box {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.dsfdtt {
  max-width: 170px;
  overflow: hidden;
}
</style>